<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .top-margin {
            margin-top: 20px; /* 可以根据需要调整此值 */
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title th:text="${patient.name}+'账单'">医院住院部管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}" >
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}">
    <!-- Tempusdominus Bbootstrap 4 -->
    <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}">
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}">
    <!-- JQVMap -->
    <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}">
    <!-- summernote -->
    <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.css}">
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
    <!-- Google Font: Source Sans Pro -->
    <link th:href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700}" rel="stylesheet">
</head>
<body class="hold-transition layout-top-nav">
<div class="container">
    <div class="wrapper">
        <div class="row align-items-center top-margin">
            <div class="col-10">
                <h3 th:text="${patient.name}+'的账单'"></h3>
            </div>
            <div class="col-2 text-right no-print">
                <input type="button" value="账单打印" class="btn btn-primary" onclick="printpage()">
            </div>
        </div>
        <h4 th:if="${date}" th:text="${#dates.format(date,'yyyy-MM-dd')}"></h4>
        <hr/>
        <div th:if="${drugs}">
            <h3>药物账单</h3>
            <div th:each="d:${drugs}">
                <br/>
                <div th:text="'时间: ' + ${#dates.format(d.creatDate,'yyyy-MM-dd')}"></div>
                <div th:text="'药物: ' + ${d.drugname}"></div>
                <div th:text="'数量: ' + ${d.number}"></div>
                <div th:text="'价格: ' + ${d.price}"></div>
            </div>
            <div class="h5 total-price" th:text="'总价: ' + ${pricedrug}"></div>
        </div>
        <br/>
        <div th:if="${exams}">
            <h4>检测账单</h4>
            <br/>
            <div th:each="e:${exams}">
                <br/>
                <div th:text="'时间: ' + ${#dates.format(e.creatTime,'yyyy-MM-dd')}"></div>
                <div th:text="'内容: ' + ${e.content}"></div>
                <div th:text="'检测时间: ' + ${#dates.format(e.checkTime,'yyyy-MM-dd')}"></div>
                <div th:text="'价格: ' + ${e.price}"></div>
            </div>
            <div class="h5 total-price" th:text="'总价: ' + ${priceexam}"></div>
            <br/>
        </div>
        <hr/>
        <div class="h4 total-price" th:if="${drugs != null && exams != null}" th:text="'合计价格: ' + (${pricedrug} + ${priceexam})"></div>
        <div class="h4 total-price" th:if="${drugs != null && exams == null}" th:text="'合计价格: ' + ${pricedrug}"></div>
        <div class="h4 total-price" th:if="${drugs == null && exams != null}" th:text="'合计价格: ' + ${priceexam}"></div>
    </div>
</div>

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<!-- DataTables -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>
<script>
    function printpage() {
        window.print();
    }
</script>
</body>
</html>